<template>
	<view>

		<view class="tabbar-container" style="height: 100%;">
			<block>

				<view class="Tabbar-Box" :style="$utils.disposeSafeBottomFun()">
					<!-- 显示左侧底栏数据 -->
					<view class="GirdBox">
						<view class="tabbar-item" v-for="(item,index) in LeftItemData" :key="index"
							@click="changeItem(item,index)">
							<view class="item-top">
								<!-- <uni-icons :color="currentItem == index ? '#51d0d0' : '#707070'"
									custom-prefix="iconfont" :type="item.PIC_PH" size="24"></uni-icons> -->


								<uni-icons :color="currentItem==index ? '#51d0d0' : '#707070'"
									fontFamily="CustomFontPlatform"
									size="18px">{{$utils.toUniCode(item.PIC_PH)}}</uni-icons>

							</view>

							<view class="item-bottom" :class="[currentItem == index ? 'item-active' : '']">
								<text>{{ item.APFunName }}</text>
							</view>
						</view>
					</view>

					<!-- 中间的 + 号 -->
					<view class="tabbar-item center-item" @click.stop="changeItemBtn">
						<view class="item-top">
							<image src="/static/image/TabBar/add-white.png"
								:style="{ transform: 'rotate(' + rotation + 'deg)',transition: 'transform 0.2s ease' }">
							</image>
						</view>
					</view>

					<!-- 显示右侧底栏数据 -->
					<view class="GirdBox">
						<view class="tabbar-item" v-for="(item,index) in RightItemData" :key="index"
							@click="changeItem(item,index + 2)">
							<view class="item-top">
								<!-- <uni-icons :color="currentItem == (index+2) ? '#51d0d0' : '#707070'"
									custom-prefix="iconfont" :type="item.PIC_PH" size="24"></uni-icons> -->


								<uni-icons :color="currentItem == (index+2) ? '#51d0d0' : '#707070'"
									fontFamily="CustomFontPlatform"
									size="18px">{{$utils.toUniCode(item.PIC_PH)}}</uni-icons>
							</view>

							<view class="item-bottom" :class="[currentItem == (index+2) ? 'item-active' : '']">
								<text>{{ item.APFunName }}</text>
							</view>
						</view>
					</view>
				</view>

			</block>
		</view>

		<!-- 工作台弹层 -->
		<uni-popup ref="ShowPopup" type="bottom" zIndex="10075" @maskClick="close" background-color="#fff"
			border-radius="10px 10px 0 0">

			<view class="PopupTop" :class="[IsEdit ? 'Edit_Main_Box' : 'Routine_Main_Box']">
				<view class="Popup_Top_Box">
					<view v-if="!IsEdit" class="EditClass">
						<view class="Left_Box">工作台</view>
						<!-- <view class="Right_Box EditText" @click="StartEdit">编辑</view> -->
					</view>

					<view v-else class="EditClass">
						<view class="Left_Box" @click="CancelEditBtn">取消</view>
						<view class="Right_Box SaveText" @click="SaveEditBtn">保存</view>
					</view>
				</view>

				<scroll-view class="scroll-Y MainPopupBox" :scroll-top="0" scroll-y="true">
					<view class="GirdMaxBox" v-for="(item,index) in MainData" :key="index">
						<view class="TitleName" v-if="item.Node.length">
							<text>{{item.TreeTypeName}}</text>
						</view>
						<u-grid v-if="item.Node.length" :border="false" col="4">
							<u-grid-item v-for="(row,ind) in item.Node" :key="ind" @click="ChoiceModule(row,ind)">
								<view class="PopupGirdBox" :class="[IsEdit ? 'Edit_Icon_Box' : 'Routine_Icon_Box']">
									<view v-if="IsEdit" class="GridIcon_RightTop"
										:class="['GridIcon_RightTop_'+ (row.Type || 'disable')]">
										<uni-icons :color="BackIconConfig(row).color" custom-prefix="iconfont"
											:type="BackIconConfig(row).icon" size="12"></uni-icons>
									</view>

									<uni-icons :color="row.AP_Colour" fontFamily="CustomFontPlatform"
										:size="24">{{$utils.toUniCode(row.PIC_PH)}}</uni-icons>
								</view>
								<text class="grid-text">{{row.APFunName}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</scroll-view>

				<!-- </view> -->
			</view>
		</uni-popup>

		<view v-if="IsEdit" class="EditBottomBox">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(row,index) in BottomChangeData" :key="index">
					<view class="PopupGirdBox Routine_Icon_Box" @click="DeleteModuleBtn(row,index)">
						<view v-if="IsEdit" class="GridIcon_RightTop" :class="['GridIcon_RightTop_'+row.Type]">
							<uni-icons :color="BackIconConfig(row).color" custom-prefix="iconfont"
								:type="BackIconConfig(row).icon" size="12"></uni-icons>
						</view>
						<uni-icons :color="row.IconColor" custom-prefix="iconfont" :type="row.TabIcon"
							size="30"></uni-icons>
					</view>
					<text class="grid-text">{{row.TabName}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	// import MorkData_All from '@/static/MorkData/MorkData_All.js';
	// import row from '../uni_modules/uview-ui/libs/config/props/row';
	export default {
		name: "zdy-tabbar",
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				IsEdit: false, // 是否开启编辑
				MainData: [], // 弹层数据
				MainData_All: [], // 弹层总数据
				OldMainData: [], // 开启编辑前，工作台数据
				OldMainData_All: [], // 开启编辑前，记录的数据
				BottomChangeData: [], // 编辑状态底部数据
				bottomSafeHeight: 0, // 底部安全高度
				rotation: 0, // + 图标旋转位置
				ShowPopup: false,
				currentItem: 0,
				BottomTabList: [],
				LeftItemData: [],
				RightItemData: [],
			};
		},
		created() {
			let _this = this;
			// console.log(_this.$store.state.appConfigInfo.ModuleInfo_All)
			// console.log(_this.$store.state.appConfigInfo.Module_Tabbar)

			let AllData = JSON.parse(JSON.stringify(_this.$store.state.appConfigInfo.ModuleInfo_All))

			this.BottomTabList = JSON.parse(JSON.stringify(_this.$store.state.appConfigInfo.Module_Tabbar));
			/* 初始化数据 */
			// 1、清除左右两侧底部栏数据
			_this.LeftItemData = [];
			_this.RightItemData = [];
			for (let [index, item] of _this.BottomTabList.entries()) {
				// 底部栏数据大于 2个 时，正常填充
				if (_this.BottomTabList.length > 2) {
					if (index <= 1) {
						_this.LeftItemData.push(item)
					} else if (index >= 2) {
						_this.RightItemData.push(item)
					}
				}
				// 数据小于等于两个时，
				else {
					if (_this.BottomTabList.length == 2) {

					}
				}
			}


			// 处理工作台数据
			_this.MainData_All = AllData; // 记录所有数据
			// 过滤出工作台需要展示的数据
			let filteredData = AllData.map((module) => {
				module.Node = module.Node.filter((item) => !item.IsTabbar); // 使用 filter 方法过滤掉 Show 为 false 的节点
				return module;
			});
			_this.MainData = filteredData;

			// console.log(filteredData);


		},
		mounted() {
			var that = this;


			// 获取底部安全高度
			// this.getBottomSafeHeight();
			this.currentItem = this.currentPage;
			uni.hideTabBar();
		},
		methods: {
			BottomModuleConfig() {
				let _this = this;
				/* 初始化数据 */
				// 1、清除左右两侧底部栏数据
				_this.LeftItemData = [];
				_this.RightItemData = [];
				if (_this.BottomChangeData.length > 2) {
					_this.LeftItemData = _this.BottomChangeData.slice(0, 2);
					_this.RightItemData = _this.BottomChangeData.slice(2);
				} else if (_this.BottomChangeData.length == 2) {
					_this.LeftItemData = [_this.BottomChangeData[0]];
					_this.RightItemData = [_this.BottomChangeData[1]];
				} else {
					_this.LeftItemData = _this.BottomChangeData;
				}

				_this.currentItem = -1;
			},
			CancelEditBtn() { // 取消按钮
				/**
				 * 1、还原到最初数据
				 * 2、关闭编辑状态
				 */
				this.MainData = JSON.parse(JSON.stringify(this.OldMainData));
				this.MainData_All = JSON.parse(JSON.stringify(this.OldMainData_All));
				this.IsEdit = false;
			},
			SaveEditBtn() { // 保存按钮

				/**
				 * 1、存储工作台数据
				 * 2、存储总数据信息
				 * 3、将选中的底部栏数据，赋值给显示的底部栏
				 */
				this.BottomModuleConfig()

				this.IsEdit = false;
			},
			ChoiceModule(data, _index) { // 点击模块
				let _this = this;
				if (this.IsEdit) { // 编辑状态，点击新增
					/**
					 * 1、如果状态是 disable，禁止操作数据
					 * 2、判断底部栏是否存在四个模块
					 * 3、如果不存在则将数据插入
					 */

					if (data.disabled) return;

					let AllData = [...this.MainData_All];

					let BottomNums = this.BottomChangeData.length;

					if (BottomNums == 4) return;

					data['Type'] = 'delete';
					this.BottomChangeData.push(data);

					// 处理原有数据
					for (const item of AllData) {
						if (item.ModuleName === data.ModuleName) {
							for (const row of item.Node) {
								if (row.TabName === data.TabName) {
									row['Show'] = false;
									break;
								}
							}
						}
					};

					_this.MainData_All = AllData;

					// 过滤出工作台需要展示的数据
					// let filteredData = AllData.map((module) => {
					// 	module.Node = module.Node.filter((item) => item
					// 		.Show); // 使用 filter 方法过滤掉 Show 为 false 的节点
					// 	return module;
					// });
					// _this.MainData = filteredData;

					_this.MainData = _this.MainData_All.map(module => ({
						...module,
						Node: module.Node.filter(item => item.Show)
					}));

				} else {
					// 跳转页面

					if (!_this.$utils.isEmpty(data.AP_Link)) {

						_this.rotation = 0;
						_this.ShowPopup = false;
						_this.$refs.ShowPopup.close();

						// if (data.disabled) {
						// 	let path = data.AP_Link;

						// 	if (data.ModuleName == '基础设置') {
						// 		path = data.AP_Link + '?Module=' + data.TabName
						// 	}

						// 	uni.navigateTo({
						// 		url: path
						// 	})
						// } else {
						// console.log(data.AP_Link);
						if (data.JumpTypeName == 'redirect') {
							uni.redirectTo({
								url: data.AP_Link + '?TabbarID=' + '-1'
								// url: data.AP_Link + '?TabbarID=' + index
							});
						} else {
							uni.navigateTo({
								url: data.AP_Link
							})
						}

						// }
					} else {
						_this.$utils.msg('模块暂未开通', 1000);
					}

				}
			},
			DeleteModuleBtn(data, index) { // 编辑状态，点击删除
				let _this = this;
				let AllData = [...this.MainData_All];
				/**
				 * 1、删除底部栏指定数据，
				 * 2、显示工作台对应数据
				 * 3、重新排版
				 */
				this.BottomChangeData.splice(index, 1);

				for (const item of AllData) {
					if (item.ModuleName === data.ModuleName) {
						for (const row of item.Node) {
							if (row.TabName === data.TabName) {
								row['Show'] = true;
								row['Type'] = 'add';
								break;
							}
						}
					}
				};

				_this.MainData_All = JSON.parse(JSON.stringify(AllData));

				// 过滤出工作台需要展示的数据
				this.MainData = AllData.map(module => {
					return {
						...module,
						Node: module.Node.filter(item => item.Show)
					}
				});

			},
			StartEdit() { // 点击编辑按钮
				this.BottomChangeData = [];
				this.BottomChangeData.push(...this.LeftItemData, ...this.RightItemData);
				// console.log(JSON.stringify(this.BottomChangeData))

				this.OldMainData_All = JSON.parse(JSON.stringify(this.MainData_All));
				this.OldMainData = JSON.parse(JSON.stringify(this.MainData));

				this.IsEdit = true;
			},
			BackIconConfig(data) {
				if (data.Type == 'disable') { // 禁止操作换位
					return {
						color: '#c8c8c8',
						backGroundColor: '#fff',
						icon: 'icon-suo'
					};
				} else if (data.Type == 'add') {
					return {
						color: '#fff',
						backGroundColor: '#1eec71',
						icon: 'icon-jiahao'
					};
				} else if (data.Type == 'delete') {
					return {
						color: '#fff',
						backGroundColor: '#fb6c4c',
						icon: 'icon-jianhao'
					};
				}

			},
			getBottomSafeHeight() { // 获取底部栏安全高度
				let _this = this;

				// console.log(safeAreaInsets)
				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		let safeArea = res.safeAreaInsets;
				// 		_this.bottomSafeHeight = safeArea.bottom;
				// 		// _this.bottomSafeHeight = res.screenHeight - safeArea.bottom + 10;
				// 	}
				// });
			},
			close() {
				this.rotation = 0;
				this.ShowPopup = false;
				this.$refs.ShowPopup.close();

				if (this.IsEdit) { // 编辑状态，重置原数据
					this.CancelEditBtn();
				}
			},
			changeItemBtn() {
				let _this = this;
				this.rotation += 45;
				if (this.rotation >= 90) {
					this.rotation = 0;
				}

				_this.ShowPopup = !_this.ShowPopup;
				if (_this.ShowPopup) {
					_this.$refs.ShowPopup.open();
				} else {
					_this.$refs.ShowPopup.close();
				}
			},
			changeItem(item, index) { // 点击其他tabbar按钮
				let _this = this;
				this.rotation = 0;
				_this.ShowPopup = false;
				_this.$refs.ShowPopup.close();
				// console.log(JSON.stringify((index)))
				// console.log(JSON.stringify((this.currentItem)))

				if (this.currentItem == index) return;
				// console.log(item.AP_Link)
				if (item.AP_Link) {
					uni.redirectTo({
						url: item.AP_Link + '?TabbarID=' + index
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}


	.GridIcon_RightTop_add {
		background-color: #1eec71;
	}

	.GridIcon_RightTop_disable {
		background-color: #fff;
		border: 1px solid #f2f2f2;
	}

	.GridIcon_RightTop_delete {
		background-color: #fb6c4c;
	}

	.PopupGirdBox {
		padding: 12px;
		border-radius: 8px;
		position: relative;

		.GridIcon_RightTop {
			position: absolute;
			right: -6px;
			top: -6px;
			border-radius: 9999px;
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	// 编辑状态数据
	// 编辑状态内容背景色
	.Edit_Main_Box {
		background-color: #f2f2f2;
	}

	// 编辑状态图标背景色
	.Edit_Icon_Box {
		background-color: #fff;
	}

	// 非编辑状态内容背景色
	.Routine_Main_Box {
		background-color: #fff;
	}

	// 非编辑状态图标背景色
	.Routine_Icon_Box {
		background-color: #f9f9f9;
	}

	.PopupTop {
		width: 100%;
		// height: 80vh;
		// background-color: #fff;
		padding-bottom: 60px;
		display: flex;
		flex-direction: column;

		.Popup_Top_Box {
			.EditClass {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 6px 8px;

				.Left_Box {
					padding: 4px 10px;
				}

				.Right_Box {
					padding: 4px 10px;
					border-radius: 12px;

				}

				// 编辑按钮
				.EditText {
					border: 1px solid #ebebeb;
					background-color: #fff;
				}

				// 保存按钮
				.SaveText {
					color: #1ea751;
				}
			}
		}

		.MainPopupBox {
			height: 60vh;
			padding: 8rpx 30rpx 20rpx;

			.GirdMaxBox {
				// margin-top: 10px;

				.u-grid {
					margin-top: 20px;

					.u-grid-item {
						margin-bottom: 14px;

						.grid-text {
							display: block;
							height: 40px;
							width: 60px;
							// line-height: 40px;
							text-align: center;
							font-size: 14px;
							margin-top: 6px;
						}
					}
				}
			}
		}
	}

	.EditBottomBox {
		z-index: 99999;
		// border-top: 1px solid #333;
		box-shadow: 0px 1px 12px -7px;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 84px;
		background-color: #fff;
		width: 100%;
		padding-top: 10px;
	}

	.tabbar-container {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		width: 100%;
		height: 50px;
		// box-shadow: 0 0 9px -5px #999;
		display: flex;
		align-items: center;
		// padding: 5px 0;
		color: #999999;
		background-color: #fff;
		z-index: 99999;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);

		.Tabbar-Box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100%;
			z-index: 99999;
			background: #fff;
			// box-shadow: 0 0 9px -5px #999;
			border-top: 1px solid #eaeaea;
			padding: 6px 0;

			.GirdBox {
				flex: 1;
				display: flex;
				// justify-content: space-evenly;
				justify-content: space-around;
				align-items: center;
			}

			.tabbar-item {
				// width: 24%;
				flex: 1;
				height: 46px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;

				.item-top {
					width: 40px;
					height: 36px;
					// padding: 10px 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: pink;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-bottom {
					font-size: 14px;
					width: 100%;
				}
			}

			.item-active {
				/* color: #4cbbff; */
				color: #51d0d0;
			}

			.center-item {
				flex: 0.5 !important;
				display: block;
				position: relative;

				.item-top {
					flex-shrink: 0;
					width: 44px;
					height: 44px;
					position: absolute;
					padding: 2px;
					/* top: -30px; */
					top: 0;
					/* left: calc(50% - 50px); */
					left: 50%;
					transform: translateX(-50%);
					border-radius: 50%;
					box-shadow: 0px 1px 19px -10px #999;
					background-color: #ffffff;

					image {
						/* background-color: #4cbbff; */
						background-color: #51d0d0;
						border-radius: 50%;
						padding: 4px;
					}

					.item-bottom {
						position: absolute;
						bottom: 5px;
					}
				}
			}
		}
	}
</style>